<!--  -->
<template>
  <div>
    <!-- toolBar -->
    <el-row :gutter="10" class="mb8" v-if="toolbar.length>0">
        <el-col :span="1.5" v-for="(item,index) in toolbar" :key="item.text">
          <el-button type="primary" icon="el-icon-plus" @click="item.on.click(selectRow)" v-if="item.text==='删除'||item.text==='修改'" size="mini" :disabled='single'>{{item.text}}</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="item.on.click()" v-else size="mini">{{item.text}}</el-button>
        </el-col>
    </el-row>
    <el-table 
      :data='dataForm'
      heigth="calc(100vh-90px)"
      border
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column v-for="(item,index) in column" :key='index' :prop="item.prop" :label="item.label" :id="item.id">
        <template slot-scope="scope">
          <div v-if="!scope.row.isEdit">{{ scope.row[item.prop] }}</div>
          <div v-else>
            <el-input v-model="scope.row[item.prop]"></el-input>
          </div>
        </template>
      </el-table-column>
    <!--基础操作-->
    <el-table-column label="操作" v-if="operator.length > 0" width="200px">
      <template slot-scope="scope">
          <el-button type="text" v-for="(item,index) in operator" :key='index' @click="hanlderClick(scope.row, scope, item)">
            <span v-if="item.text==='编辑'">{{!scope.row.isEdit ? '编辑' : '完成'}}</span>
            <span v-else>{{item.text}}</span>
          </el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>
   
</template>

<script>
import dataFormat from './utils/tableColumnDisplay'
import req from '@/api/org/index.js'
export default {
  data() {
    return {
      single: true,
      selectRow: [],
      data:[]
    };
  },
  props: ['column', 'dataForm', 'tableTitle', 'operator','saveUrl','toolbar'],
  components: {},
  created() {
    console.log('column=',this.column)
    this.dataForm = dataFormat(this.column,this.dataForm)
  },
  mounted() {
    // 
  },
  computed: {
  },

  methods: {
    addLine(){
      this.dataForm.push({
        isEdit: true
      })
    },
    hanlderClick(row, scope, item){
      if(!scope.row.isEdit && item.text.includes('编辑')){
        this.$set(row, 'isEdit', true)
        console.log('编辑')
      }
      else if(item.text.includes('删除')){
        console.log('删除')
      }
      else{
        console.log('完成')
        this.$set(row, 'isEdit', false)
        let params = {}
        Object.assign(params, row)
        console.log('this.saveUrl=', this.saveUrl)
        req(this.saveUrl, params).then((res)=>{
          console.log('saveSuccess')
        })
      }
      
    },
    // 监听table选择框
    handleSelectionChange(selection) {
      console.log('selection=', selection)
      this.single = selection.length < 1
      this.selectRow = selection
      // 调用父组件对应的方法 handleSelectionChange
      this.$emit('handleSelectionChange', selection)
    },
  },
};
</script>
<style lang='less' scoped>
  .box{
    width: 100%;
  }
</style>